<template>
	<div class="flex flex-col items-center py-[20px]">
		<div class="mb-[10px] flex items-center text-[20px] text-[#357efe]">
			<van-icon size="5.34vw" name="https://oss.dingdongdr.com/static/user/wait.png" />&nbsp;&nbsp;等待付款
		</div>
		<van-count-down :time="300000">
			<template #default="timeData">
				<p class="text-center">
					请与 <span class="text-[#357efe]">{{ timeData.minutes }}</span> 分
					<span class="text-[#357efe]">{{ timeData.seconds }}</span> 秒内完成该订单的支付
				</p>
				<p class="text-center">逾期未支付订单自动取消</p>
			</template>
		</van-count-down>
	</div>
	<div class="m-[10px] flex items-center rounded-[10px] bg-[#ffffff] p-[10px]">
		<van-icon size="4.8vw" name="https://oss.dingdongdr.com/static/user/%E6%8F%90%E9%86%92.png" />
		<div class="ml-[10px]">
			<div>请先支付押金，才能进行护理；</div>
			<div>如需使用耗材，完成护理后请支付耗材费。</div>
		</div>
	</div>
	<div class="m-[10px] rounded-[10px] bg-[#ffffff] px-[10px]">
		<div class="py-[10px] text-[16px]">预约信息</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">护理项目<span>压疮护理</span></div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">医护姓名<span>王**</span></div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">预约时间<span>2022-10-1</span></div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">就诊人姓名<span>王城</span></div>
	</div>
	<div class="m-[10px] rounded-[10px] bg-[#ffffff] px-[10px]">
		<div class="py-[10px] text-[16px]">费用信息</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">
			服务费<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
		</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">
			问诊费<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
		</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">
			打车费<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
		</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">材料服务费<span>阅读下方注释</span></div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">押金<span>已缴纳</span></div>
	</div>
	<div class="m-[10px] flex items-center justify-between rounded-[10px] bg-[#ffffff] p-[10px]">
		费用合计<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
	</div>
	<!-- 提示 -->
	<div class="m-[10px] flex items-start justify-between text-[#848484]">
		<van-icon class="mt-[3px]" name="https://oss.dingdongdr.com/static/user/hini.png" />
		<div class="w-[334px]">材料服务费用视上门护理实际使用耗材决定，于护理结束后支付。</div>
	</div>
	<div class="m-[10px] flex items-start justify-between text-[#848484]">
		<van-icon class="mt-[3px]" name="https://oss.dingdongdr.com/static/user/hini.png" />
		<div class="w-[334px]">押金为材料服务费押金，可在服务完成后退还。</div>
	</div>
	<!-- 病情信息 -->
	<div class="m-[10px] rounded-[10px] bg-[#ffffff] px-[10px] pb-[10px]">
		<div class="py-[10px] text-[16px]">病情信息</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">活动能力<span>外出活动</span></div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">就医证明</div>
		<div class="grid grid-cols-4 place-items-center gap-[10px] rounded-[6px] bg-[#f7f9fa] p-[10px]">
			<img
				v-for="item in 10"
				:key="item"
				class="h-[68px] w-[68px] rounded-[6px]"
				src="https://oss.dingdongdr.com/static/enter/doctor2.png"
				alt=""
			/>
		</div>
		<div class="flex items-center justify-between py-[8px] text-[#4b4e57]">病情描述</div>
		<div class="rounded-[10px] bg-[#f7f9fa] p-[10px]">erere</div>
	</div>
	<div class="p-[40px]"></div>
	<div class="fixed bottom-0 left-0 right-0 flex justify-between bg-white px-[26px] py-[18px]">
		<div>合计：<span class="text-[19px] text-[#ff3939]">&yen;800</span></div>
		<div class="rounded-[30px] bg-[#5288f5] px-[52px] py-[10px] text-[16px] text-[#ffffff]">支付</div>
	</div>
</template>
